<template>
    <PageView>
        <a-spin :spinning="loading">
            <a-card>
                <div slot="title">
                    <span>配置项参数</span>

                    <a-popconfirm
                        title="确定要清除数据吗?"
                        @confirm="clearData"
                        okText="确定"
                        cancelText="取消"
                    >
                        <a-button type="primary" style="margin-left: 50px;">清除数据</a-button>
                    </a-popconfirm>
                </div>
                <a-form :form="form" style="width: 350px">
                    <a-form-item :label="value.name" :label-col="labelCol" :wrapper-col="wrapperCol" v-for="(value,key) in inputArray">
                        <a-input v-decorator="[value.key, { rules: [{ required: true, message: '请输入账号' }],initialValue:value.value}]" placeholder="请输入账号"/>
                    </a-form-item>
                </a-form>
                <a-button type="primary" @click="sub">
                    提交
                </a-button>
            </a-card>
        </a-spin>
    </PageView>
</template>

<script>
    import Config from '../../api/Config'
    import { clearData } from '../../api/login'

    export default {
        name: 'index',
        data(){
            return{
                form: this.$form.createForm(this),
                loading:true,
                labelCol:{
                    xs:{span:24},
                    sm:{span:12},
                },
                wrapperCol:{
                    xs:{span:24},
                    sm:{span:12},
                },
                inputArray:[]
            }
        },
        activated(){
            this.getConfig()
        },
        methods:{
            getConfig(){
                this.loading = true
                Config.getAllConfig().then(res => {
                    this.inputArray = res.config
                    this.loading = false
                })
            },
            sub(){
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.loading = true
                        Config.changeConfig ({...values }).then(res => {
                            this.loading = false
                        }).catch(res=>{
                            this.getConfig()
                        })
                    }
                });
            },
            clearData() {
                clearData().then(() => {
                    this.getConfig();
                })
            }
        }
    }
</script>

<style scoped lang="less">

</style>